<template>
  <div>
    <el-button type="primary" plain @click="onOpen">收藏这个商品</el-button>
    <el-dialog
      v-model="state.dialogVisible"
      title="收藏这个商品"
      width="1200"
      :close-on-click-modal="false"
    >
      <div>
        <el-form
          ref="submitListingFormRef"
          label-position="left"
          label-width="120px"
          :model="submitListing"
        >
          <!-- 选择商品类型 -->
          <!--          &lt;!&ndash; 选择模板 &ndash;&gt;-->
          <!--          <el-form-item label="选择模板" prop="templateId" :rules="[{ required: true, message: '请选择模板', trigger: 'change' }]">-->
          <!--            <el-select v-model="submitListing.templateId" placeholder="请选择模板" style="width: 100%">-->
          <!--              <el-option v-for="item in templateList" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->

          <!-- 通用字段 -->
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="产品型号名称"
                prop="modelName"
                :rules="[{ required: true, message: '请输入产品型号名称', trigger: 'blur' }]"
              >
                <el-input
                  v-model="submitListing.modelName"
                  maxlength="100"
                  show-word-limit
                  placeholder="产品型号名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="产品型号"
                prop="modelNumber"
                :rules="[{ required: true, message: '请输入产品型号', trigger: 'blur' }]"
              >
                <el-input
                  v-model="submitListing.modelNumber"
                  maxlength="100"
                  show-word-limit
                  placeholder="产品型号"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="产品外部类型"
                prop="standardProductIdType"
                :rules="[{ required: true, message: '请选择产品外部ID类型', trigger: 'change' }]"
              >
                <el-select
                  v-model="submitListing.standardProductIdType"
                  placeholder="ENA/UPC/GTIN"
                  style="width: 100%"
                >
                  <el-option label="豁免" value="exemption"></el-option>
                  <el-option label="EAN" value="ean"></el-option>
                  <el-option label="UPC" value="upc"></el-option>
                  <el-option label="GTIN" value="gtin"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                v-if="submitListing.standardProductIdType !== 'exemption'"
                label="产品外部ID值"
                prop="standardProductIdValue"
                :rules="[{ required: true, message: '请输入产品外部ID值', trigger: 'blur' }]"
              >
                <el-input
                  v-model="submitListing.standardProductIdValue"
                  maxlength="100"
                  show-word-limit
                  placeholder="产品外部ID值"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item
            label="产品描述"
            prop="description"
            :rules="[{ required: true, message: '请输入产品描述', trigger: 'blur' }]"
          >
            <el-input
              type="textarea"
              :rows="5"
              v-model="submitListing.description"
              maxlength="2500"
              show-word-limit
              placeholder="产品描述"
              style="width: 100%"
            ></el-input>
          </el-form-item>

          <!-- 通用属性字段 -->
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="颜色"
                prop="color"
                :rules="[{ required: true, message: '请输入颜色', trigger: 'blur' }]"
              >
                <el-input
                  v-model="submitListing.color"
                  maxlength="100"
                  show-word-limit
                  placeholder="颜色"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="单位数量"
                prop="unitCount"
                :rules="[{ required: true, message: '请输入单位数量', trigger: 'blur' }]"
              >
                <el-input
                  v-model="submitListing.unitCount"
                  maxlength="50"
                  placeholder="单位数量"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="是否需要组装"
                prop="isAssemblyRequired"
                :rules="[{ required: true, message: '请选择是否需要组装', trigger: 'change' }]"
              >
                <el-switch
                  v-model="submitListing.isAssemblyRequired"
                  active-text="是"
                  inactive-text="否"
                ></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="危险品规管"
                prop="supplierDeclaredDgHzRegulation"
                :rules="[{ required: true, message: '请选择危险品规管', trigger: 'blur' }]"
              >
                <el-select
                  v-model="submitListing.supplierDeclaredDgHzRegulation"
                  placeholder="请选择危险品规管"
                >
                  <el-option
                    v-for="dict in getIntDictOptions2('supplierDeclaredDgHzRegulation')"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="配送方式"
                prop="fulfillmentChannelCode"
                :rules="[{ required: true, message: '请选择配送方式', trigger: 'blur' }]"
              >
                <el-select
                  v-model="submitListing.fulfillmentChannelCode"
                  placeholder="请选择配送方式"
                >
                  <el-option
                    v-for="dict in getIntDictOptions2('fulfillmentChannelCode')"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="箱子数量"
                prop="numberOfBoxes"
                :rules="[{ required: true, message: '请输入箱子数量', trigger: 'blur' }]"
              >
                <el-input v-model="submitListing.numberOfBoxes" placeholder="箱子数量"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="包裹尺寸"
                prop="packageSize"
                :rules="[{ required: true, message: '请输入包裹尺寸', trigger: 'blur' }]"
              >
                <el-input v-model="submitListing.packageSize" placeholder="包裹尺寸"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="包裹重量"
                prop="packageWeight"
                :rules="[{ required: true, message: '请输入包裹重量', trigger: 'blur' }]"
              >
                <el-input v-model="submitListing.packageWeight" placeholder="包裹重量"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="是否需要电池"
                prop="batteriesRequired"
                :rules="[{ required: true, message: '请选择是否需要电池', trigger: 'change' }]"
              >
                <el-switch
                  v-model="submitListing.batteriesRequired"
                  active-text="是"
                  inactive-text="否"
                ></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="5" v-if="submitListing.batteriesRequired">
              <el-form-item
                label="是否提供电池"
                prop="batteriesIncluded"
                :rules="[{ required: true, message: '请选择是否提供电池', trigger: 'change' }]"
              >
                <el-switch
                  v-model="submitListing.batteriesIncluded"
                  active-text="是"
                  inactive-text="否"
                ></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="submitListing.batteriesIncluded">
              <el-form-item
                label="电池类型"
                label-width="100px"
                prop="cellComposition"
                :rules="[{ required: true, message: '请选择电池类型', trigger: 'change' }]"
              >
                <el-select v-model="submitListing.cellComposition" placeholder="请选择电池类型">
                  <el-option
                    v-for="dict in getIntDictOptions2('cellComposition')"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 座位所需字段 -->
          <template v-if="submitListing.productType === 'CHAIR'">
            <h3 class="type-title">座位属性</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="材料"
                  prop="material"
                  :rules="[{ required: true, message: '请选择材料', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.material" placeholder="请选择材料">
                    <el-option
                      v-for="dict in getIntDictOptions2('CHAIR-material')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="商品状况"
                  prop="conditionType"
                  :rules="[{ required: true, message: '请选择商品状况', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.conditionType" placeholder="请选择商品状况">
                    <el-option
                      v-for="dict in getIntDictOptions2('CHAIR-conditionType')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="包含组件"
                  prop="includedComponents"
                  :rules="[{ required: true, message: '请选择包含组件', trigger: 'blur' }]"
                >
                  <el-select
                    v-model="submitListing.includedComponents"
                    placeholder="请选择包含组件"
                  >
                    <el-option
                      v-for="dict in getIntDictOptions2('CHAIR-includedComponents')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="形状"
                  prop="itemShape"
                  :rules="[{ required: true, message: '请选择形状', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.itemShape" placeholder="请选择形状">
                    <el-option
                      v-for="dict in getIntDictOptions2('CHAIR-itemShape')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item
                  label="座位靠背净高"
                  prop="seatBackInteriorHeight"
                  :rules="[{ required: true, message: '请输入座位靠背净高', trigger: 'blur' }]"
                >
                  <el-input
                    v-model="submitListing.seatBackInteriorHeight"
                    placeholder="座位靠背净高"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  label="座位深度"
                  prop="seatDepth"
                  :rules="[{ required: true, message: '请输入座位深度', trigger: 'blur' }]"
                >
                  <el-input v-model="submitListing.seatDepth" placeholder="座位深度"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  label="座位高度"
                  prop="seatHeight"
                  :rules="[{ required: true, message: '请输入座位高度', trigger: 'blur' }]"
                >
                  <el-input v-model="submitListing.seatHeight" placeholder="座位高度"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  label="最大可取重量"
                  prop="maximumWeightRecommendation"
                  :rules="[{ required: true, message: '请输入最大可取重量', trigger: 'blur' }]"
                >
                  <el-input
                    v-model="submitListing.maximumWeightRecommendation"
                    placeholder="最大可取重量"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="座位材料"
                  prop="seatMaterialType"
                  :rules="[{ required: true, message: '请选择座位材料类型', trigger: 'blur' }]"
                >
                  <el-select
                    v-model="submitListing.seatMaterialType"
                    placeholder="请选择座位材料类型"
                  >
                    <el-option
                      v-for="dict in getIntDictOptions2('CHAIR-seatMaterialType')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="结构框架材料"
                  prop="framemMaterial"
                  :rules="[{ required: true, message: '请选择结构框架材料', trigger: 'blur' }]"
                >
                  <el-select
                    v-model="submitListing.framemMaterial"
                    placeholder="请选择结构框架材料"
                  >
                    <el-option
                      v-for="dict in getIntDictOptions2('CHAIR-framemMaterial')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item
              label="是否易碎品"
              prop="isFragile"
              :rules="[{ required: true, message: '请选择是否易碎品', trigger: 'change' }]"
            >
              <el-switch
                v-model="submitListing.isFragile"
                active-text="是"
                inactive-text="否"
              ></el-switch>
            </el-form-item>
          </template>

          <!-- 桌子所需字段 -->
          <template v-if="submitListing.productType === 'DESK'">
            <h3 class="type-title">桌子属性</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="材料"
                  prop="material"
                  :rules="[{ required: true, message: '请选择材料', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.material" placeholder="请选择材料">
                    <el-option
                      v-for="dict in getIntDictOptions2('DESK-material')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="商品状况"
                  prop="conditionType"
                  :rules="[{ required: true, message: '请选择商品状况', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.conditionType" placeholder="请选择商品状况">
                    <el-option
                      v-for="dict in getIntDictOptions2('DESK-conditionType')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="包含组件"
                  prop="includedComponents"
                  :rules="[{ required: true, message: '请选择包含组件', trigger: 'blur' }]"
                >
                  <el-select
                    v-model="submitListing.includedComponents"
                    placeholder="请选择包含组件"
                  >
                    <el-option
                      v-for="dict in getIntDictOptions2('DESK-includedComponents')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="形状"
                  prop="itemShape"
                  :rules="[{ required: true, message: '请选择形状', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.itemShape" placeholder="请选择形状">
                    <el-option
                      v-for="dict in getIntDictOptions2('DESK-itemShape')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="桌面设计"
                  prop="deskDesign"
                  :rules="[{ required: true, message: '请选择桌面设计', trigger: 'change' }]"
                >
                  <el-select v-model="submitListing.deskDesign" placeholder="请选择桌面设计">
                    <el-option
                      v-for="dict in getIntDictOptions2('DESK-deskDesign')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="最大可取重量"
                  prop="maximumWeightRecommendation"
                  :rules="[{ required: true, message: '请输入最大可取重量', trigger: 'blur' }]"
                >
                  <el-input
                    v-model="submitListing.maximumWeightRecommendation"
                    placeholder="最大可取重量"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="基础颜色"
                  prop="baseColor"
                  :rules="[{ required: true, message: '请选择基础颜色', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.baseColor" placeholder="请选择基础颜色">
                    <el-option
                      v-for="dict in getIntDictOptions2('DESK-baseColor')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="基础材料"
                  prop="baseMaterial"
                  :rules="[{ required: true, message: '请选择基础材料', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.baseMaterial" placeholder="请选择基础材料">
                    <el-option
                      v-for="dict in getIntDictOptions2('DESK-baseMaterial')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="表面处理类型"
                  prop="finishType"
                  :rules="[{ required: true, message: '请选择表面处理类型', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.finishType" placeholder="请选择表面处理类型">
                    <el-option
                      v-for="dict in getIntDictOptions2('DESK-finishType')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="结构框架材料"
                  prop="framemMaterial"
                  :rules="[{ required: true, message: '请选择结构框架材料', trigger: 'blur' }]"
                >
                  <el-select
                    v-model="submitListing.framemMaterial"
                    placeholder="请选择结构框架材料"
                  >
                    <el-option
                      v-for="dict in getIntDictOptions2('DESK-framemMaterial')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="顶部颜色"
                  prop="topColor"
                  :rules="[{ required: true, message: '请选择顶部颜色', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.topColor" placeholder="请选择顶部颜色">
                    <el-option
                      v-for="dict in getIntDictOptions2('DESK-topColor')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="顶部材料"
                  prop="topMaterial"
                  :rules="[{ required: true, message: '请选择顶部材料', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.topMaterial" placeholder="请选择顶部材料">
                    <el-option
                      v-for="dict in getIntDictOptions2('DESK-topMaterial')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="特别功能"
                  prop="specialFeature"
                  :rules="[{ required: true, message: '请选择特别功能', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.specialFeature" placeholder="请选择特别功能">
                    <el-option
                      v-for="dict in getIntDictOptions2('DESK-specialFeature')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </template>

          <!-- 柜子所需字段 -->
          <template v-if="submitListing.productType === 'CABINET'">
            <h3 class="type-title">柜子属性</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="材料"
                  prop="material"
                  :rules="[{ required: true, message: '请选择材料', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.material" placeholder="请选择材料">
                    <el-option
                      v-for="dict in getIntDictOptions2('CABINET-material')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="商品状况"
                  prop="conditionType"
                  :rules="[{ required: true, message: '请选择商品状况', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.conditionType" placeholder="请选择商品状况">
                    <el-option
                      v-for="dict in getIntDictOptions2('CABINET-conditionType')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="包含组件"
                  prop="includedComponents"
                  :rules="[{ required: true, message: '请选择包含组件', trigger: 'blur' }]"
                >
                  <el-select
                    v-model="submitListing.includedComponents"
                    placeholder="请选择包含组件"
                  >
                    <el-option
                      v-for="dict in getIntDictOptions2('CABINET-includedComponents')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="形状"
                  prop="itemShape"
                  :rules="[{ required: true, message: '请选择形状', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.itemShape" placeholder="请选择形状">
                    <el-option
                      v-for="dict in getIntDictOptions2('CABINET-itemShape')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="适合房型"
                  prop="roomType"
                  :rules="[{ required: true, message: '请选择适合房型', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.roomType" placeholder="请选择适合房型">
                    <el-option
                      v-for="dict in getIntDictOptions2('CABINET-roomType')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="安装类型"
                  prop="mountingType"
                  :rules="[{ required: true, message: '请选择安装类型', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.mountingType" placeholder="请选择安装类型">
                    <el-option
                      v-for="dict in getIntDictOptions2('CABINET-mountingType')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="抽屉数量"
                  prop="numberOfDrawers"
                  :rules="[
                    { required: true, message: '请输入抽屉数量', trigger: 'blur' },
                    { type: 'number', message: '请输入有效的数字', trigger: 'blur' }
                  ]"
                >
                  <el-input
                    v-model.number="submitListing.numberOfDrawers"
                    placeholder="抽屉数量"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="面料类型"
                  prop="fabricType"
                  :rules="[{ required: true, message: '请输入面料类型', trigger: 'blur' }]"
                >
                  <el-input
                    v-model="submitListing.fabricType"
                    maxlength="100"
                    placeholder="面料类型"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="柜门开启方向"
                  prop="doorOrientation"
                  :rules="[{ required: true, message: '请选择柜门开启方向', trigger: 'change' }]"
                >
                  <el-select
                    v-model="submitListing.doorOrientation"
                    placeholder="请选择柜门开启方向"
                  >
                    <el-option
                      v-for="dict in getIntDictOptions2('CABINET-doorOrientation')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="柜门风格"
                  prop="doorStyle"
                  :rules="[{ required: true, message: '请选择柜门风格', trigger: 'change' }]"
                >
                  <el-select v-model="submitListing.doorStyle" placeholder="请选择柜门风格">
                    <el-option
                      v-for="dict in getIntDictOptions2('CABINET-doorStyle')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="结构类型"
                  prop="constructionType"
                  :rules="[{ required: true, message: '请输入结构类型', trigger: 'blur' }]"
                >
                  <el-input
                    v-model="submitListing.constructionType"
                    maxlength="100"
                    placeholder="结构类型"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="是否易碎品"
                  prop="isFragile"
                  :rules="[{ required: true, message: '请选择是否易碎品', trigger: 'change' }]"
                >
                  <el-switch
                    v-model="submitListing.isFragile"
                    active-text="是"
                    inactive-text="否"
                  ></el-switch>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="特别功能"
                  prop="specialFeature"
                  :rules="[{ required: true, message: '请选择特别功能', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.specialFeature" placeholder="请选择特别功能">
                    <el-option
                      v-for="dict in getIntDictOptions2('CABINET-specialFeature')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </template>

          <!-- 货架所需字段 -->
          <template v-if="submitListing.productType === 'SHELF'">
            <h3 class="type-title">货架属性</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="材料"
                  prop="material"
                  :rules="[{ required: true, message: '请选择材料', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.material" placeholder="请选择材料">
                    <el-option
                      v-for="dict in getIntDictOptions2('SHELF-material')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="商品状况"
                  prop="conditionType"
                  :rules="[{ required: true, message: '请选择商品状况', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.conditionType" placeholder="请选择商品状况">
                    <el-option
                      v-for="dict in getIntDictOptions2('SHELF-conditionType')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="包含组件"
                  prop="includedComponents"
                  :rules="[{ required: true, message: '请选择包含组件', trigger: 'blur' }]"
                >
                  <el-select
                    v-model="submitListing.includedComponents"
                    placeholder="请选择包含组件"
                  >
                    <el-option
                      v-for="dict in getIntDictOptions2('SHELF-includedComponents')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="形状"
                  prop="itemShape"
                  :rules="[{ required: true, message: '请选择形状', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.itemShape" placeholder="请选择形状">
                    <el-option
                      v-for="dict in getIntDictOptions2('SHELF-itemShape')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="货架类型"
                  prop="shelfType"
                  :rules="[{ required: true, message: '请选择货架类型', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.shelfType" placeholder="请选择货架类型">
                    <el-option
                      v-for="dict in getIntDictOptions2('SHELF-shelfType')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="适用年龄范围"
                  prop="ageRangeDescription"
                  :rules="[{ required: true, message: '请选择适用年龄范围', trigger: 'blur' }]"
                >
                  <el-select
                    v-model="submitListing.ageRangeDescription"
                    placeholder="请选择适用年龄范围"
                  >
                    <el-option
                      v-for="dict in getIntDictOptions2('SHELF-ageRangeDescription')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="适合房型"
                  prop="roomType"
                  :rules="[{ required: true, message: '请输入适合房型', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.roomType" placeholder="请选择结构框架材料">
                    <el-option
                      v-for="dict in getIntDictOptions2('SHELF-roomType')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="安装类型"
                  prop="mountingType"
                  :rules="[{ required: true, message: '请选择安装类型', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.mountingType" placeholder="请选择安装类型">
                    <el-option
                      v-for="dict in getIntDictOptions2('SHELF-mountingType')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="书架数量"
                  prop="numberOfShelves"
                  :rules="[{ required: true, message: '请输入书架数量', trigger: 'blur' }]"
                >
                  <el-input
                    v-model="submitListing.numberOfShelves"
                    placeholder="书架数量"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="结构框架材料"
                  prop="framemMaterial"
                  :rules="[{ required: true, message: '请选择结构框架材料', trigger: 'blur' }]"
                >
                  <el-select
                    v-model="submitListing.framemMaterial"
                    placeholder="请选择结构框架材料"
                  >
                    <el-option
                      v-for="dict in getIntDictOptions2('SHELF-framemMaterial')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="特别功能"
                  prop="specialFeature"
                  :rules="[{ required: true, message: '请选择特别功能', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.specialFeature" placeholder="请选择特别功能">
                    <el-option
                      v-for="dict in getIntDictOptions2('SHELF-specialFeature')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </template>

          <!-- 照明灯所需字段 -->
          <template v-if="submitListing.productType === 'LIGHT_FIXTURE'">
            <h3 class="type-title">照明灯属性</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="材料"
                  prop="material"
                  :rules="[{ required: true, message: '请选择材料', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.material" placeholder="请选择材料">
                    <el-option
                      v-for="dict in getIntDictOptions2('LIGHT_FIXTURE-material')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="商品状况"
                  prop="conditionType"
                  :rules="[{ required: true, message: '请选择商品状况', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.conditionType" placeholder="请选择商品状况">
                    <el-option
                      v-for="dict in getIntDictOptions2('LIGHT_FIXTURE-conditionType')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="包含组件"
                  prop="includedComponents"
                  :rules="[{ required: true, message: '请选择包含组件', trigger: 'blur' }]"
                >
                  <el-select
                    v-model="submitListing.includedComponents"
                    placeholder="请选择包含组件"
                  >
                    <el-option
                      v-for="dict in getIntDictOptions2('LIGHT_FIXTURE-includedComponents')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="形状"
                  prop="itemShape"
                  :rules="[{ required: true, message: '请选择形状', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.itemShape" placeholder="请选择形状">
                    <el-option
                      v-for="dict in getIntDictOptions2('LIGHT_FIXTURE-itemShape')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="适合房型"
                  prop="roomType"
                  :rules="[{ required: true, message: '请选择适合房型', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.roomType" placeholder="请选择适合房型">
                    <el-option
                      v-for="dict in getIntDictOptions2('LIGHT_FIXTURE-roomType')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="保修说明"
                  prop="warrantyDescription"
                  :rules="[{ required: true, message: '请输入保修说明', trigger: 'blur' }]"
                >
                  <el-input
                    v-model="submitListing.warrantyDescription"
                    maxlength="500"
                    show-word-limit
                    placeholder="保修说明"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="电源类型"
                  prop="powerSourceType"
                  :rules="[{ required: true, message: '请选择电源类型', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.powerSourceType" placeholder="请选择电源类型">
                    <el-option
                      v-for="dict in getIntDictOptions2('LIGHT_FIXTURE-powerSourceType')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="产品特定用途"
                  prop="specificUsesForProduct"
                  :rules="[{ required: true, message: '请选择产品特定用途', trigger: 'blur' }]"
                >
                  <el-select
                    v-model="submitListing.specificUsesForProduct"
                    placeholder="请选择产品特定用途"
                  >
                    <el-option
                      v-for="dict in getIntDictOptions2('LIGHT_FIXTURE-specificUsesForProduct')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="风格"
                  prop="style"
                  :rules="[{ required: true, message: '请选择风格', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.style" placeholder="请选择风格">
                    <el-option
                      v-for="dict in getIntDictOptions2('LIGHT_FIXTURE-style')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="室内外使用"
                  prop="indoorOutdoorUsage"
                  :rules="[{ required: true, message: '请选择室内室外使用情况', trigger: 'blur' }]"
                >
                  <el-select
                    v-model="submitListing.indoorOutdoorUsage"
                    placeholder="请选择室内室外使用情况"
                  >
                    <el-option
                      v-for="dict in getIntDictOptions2('LIGHT_FIXTURE-indoorOutdoorUsage')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item
                  label="灯具形式"
                  prop="lightFixtureForm"
                  :rules="[{ required: true, message: '请选择灯具形式', trigger: 'blur' }]"
                >
                  <el-select v-model="submitListing.lightFixtureForm" placeholder="请选择灯具形式">
                    <el-option
                      v-for="dict in getIntDictOptions2('LIGHT_FIXTURE-lightFixtureForm')"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="产品尺寸"
                  prop="itemLengthWidthHeight"
                  :rules="[{ required: true, message: '请输入产品尺寸', trigger: 'blur' }]"
                >
                  <el-input
                    v-model="submitListing.itemLengthWidthHeight"
                    placeholder="产品尺寸（长×宽×高）"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
        </el-form>
      </div>
      <template #footer>
        <div>
          <el-button @click="state.dialogVisible = false">取消</el-button>
          <el-popover title="验证结果" placement="top" trigger="click" :width="600">
            <template #default>
              <el-table :data="issues">
                <el-table-column type="expand">
                  <template #default="{ row }">
                    <p class="text" v-text="row.message"></p>
                    <p class="text" v-text="row.attributeName"></p>
                  </template>
                </el-table-column>
                <el-table-column property="code" label="code" />
                <el-table-column label="severity">
                  <template #default="{ row }">
                    <el-tag :type="row.severity === 'ERROR' ? 'danger' : 'warning'" effect="dark">
                      {{ row.severity }}
                    </el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </template>
            <template #reference>
              <!--              <el-button type="primary" plain @click="reqValidationPreview"-->
              <!--                         :disabled="state.btnLoading" :loading="state.previewBtnLoading">验证属性-->
              <!--              </el-button>-->
            </template>
          </el-popover>
          <el-button
            type="primary"
            @click="reqPreSubmitListing"
            :disabled="state.previewBtnLoading"
            :loading="state.btnLoading"
            >保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue'
import {
  collectedProductsListingApi,
  listingTemplateNotPage,
  preSubmitListing,
  saveSubmitListing
} from '@/api/common'
import { ElMessage, FormInstance } from 'element-plus'
import { globalSubmitListingEvent } from '@/plugins/util/constants'
import { DICT_TYPE, getIntDictOptions2 } from '@/utils/dict'

const submitListingFormRef = ref<FormInstance>()
const issues = ref<[]>()

const props = defineProps({
  productId: {
    type: String,
    default: ''
  },
  productDto: {
    type: Object,
    default: () => ({})
  }
})

const state = reactive({
  dialogVisible: false,
  previewBtnLoading: false,
  btnLoading: false
})

// // 包含所有字段的响应式对象
//
// const submitListing = reactive({
//   // 基础字段
//   productType: '', // 商品类型：SEAT/TABLE/SHELF/LIGHT_FIXTURE
//   templateId: '',
//   description: '',
//   modelName: 'BRY-001-01 Folding Chair',
//   modelNumber: 'BRY-001-01 Folding Chairs',
//   standardProductIdType: '',
//   standardProductIdValue: '',
//
//   // 通用字段
//   material: 'Alloy Steel, Aluminum, Breathable Special Mesh, Mesh, Metal',
//   color: 'Black',
//   itemShape: 'Modern',
//   isAssemblyRequired: true,
//   unitCount: '2.0',
//   includedComponents: 'chair',
//   conditionType: 'new_new',
//   fulfillmentChannelCode: 'AMAZON_NA',
//   numberOfBoxes: '5',
//   batteriesRequired: false,
//   supplierDeclaredDgHzRegulation: 'not_applicable',
//   packageSize: '19.69 * 19.09 * 9.45 inches',
//   packageWeight: '15.18',
//
//   // 桌子字段
//   deskDesign: 'computer_desk',
//   baseColor: 'Brown',
//   baseMaterial: 'Pine Wood',
//   finishType: 'Brushed',
//   topColor: 'Brown',
//   topMaterial: 'Acacia',
//   specialFeature: 'Adjustable',
//   maximumWeightRecommendation:320.0,
//   framemMaterial:'Alloy Steel, Aluminum, Metal',
// })

// const submitListing = reactive({
//   // 基础字段
//   productType: '', // 商品类型：SEAT/TABLE/SHELF/LIGHT_FIXTURE
//   templateId: '',
//   description: '',
//   modelName: '',
//   modelNumber: '',
//   standardProductIdType: 'exemption',
//   standardProductIdValue: '',
//
//   // 通用字段
//   material: 'Alloy Steel, Aluminum, Breathable Special Mesh, Mesh, Metal',
//     color: 'Black',
//   itemShape: 'Modern',
//   isAssemblyRequired: true,
//   unitCount: '2.0',
//   includedComponents: 'chair',
//   conditionType: 'new_new',
//   fulfillmentChannelCode: 'AMAZON_NA',
//   numberOfBoxes: '5',
//   batteriesRequired: false,
//   supplierDeclaredDgHzRegulation: 'not_applicable',
//   packageSize: '19.69 * 19.09 * 9.45 inches',
//   packageWeight: '15.18',
//
//   // 座位字段
//   seatBackInteriorHeight: '20.5',
//   seatDepth: '18.9',
//   seatHeight: '19.69',
//   seatMaterialType: 'Acrylic',
//   isFragile: false,
//   framemMaterial: 'Alloy Steel, Aluminum, Metal',
//   maximumWeightRecommendation: '320.0'
//
// })


const submitListing = reactive({
  // 基础字段
  productType: '', // 商品类型：SEAT/TABLE/SHELF/LIGHT_FIXTURE
  templateId: '',
  description: '',
  modelName: '',
  modelNumber: '',
  standardProductIdType: 'exemption',
  standardProductIdValue: '',

  // 通用字段
  material: '',
  color: '',
  itemShape: '',
  isAssemblyRequired: false,
  unitCount: '',
  includedComponents: '',
  conditionType: '',
  fulfillmentChannelCode: '',
  numberOfBoxes: '',
  batteriesRequired: false,
  batteriesIncluded: false,
  supplierDeclaredDgHzRegulation: '',
  packageSize: '',
  packageWeight: '',

  // 座位字段
  seatBackInteriorHeight: '',
  seatDepth: '',
  seatHeight: '',
  seatMaterialType: '',
  isFragile: false,
  framemMaterial: '',
  maximumWeightRecommendation: '',

  // 桌子字段
  deskDesign: '',
  baseColor: '',
  baseMaterial: '',
  finishType: '',
  topColor: '',
  topMaterial: '',
  specialFeature: '',

  // 货架字段
  shelfType: '',
  ageRangeDescription: '',
  roomType: '',
  mountingType: '',
  numberOfShelves: '',

  // 照明灯字段
  warrantyDescription: '',
  powerSourceType: '',
  specificUsesForProduct: '',
  style: '',
  indoorOutdoorUsage: '',
  lightFixtureForm: '',
  itemLengthWidthHeight: ''
})

// 批量同步相同字段名的属性
const syncProductDtoToSubmitListing = () => {
  const { productDto } = props
  if (!productDto) return

  Object.assign(submitListing, {
    ...Object.keys(submitListing).reduce((obj, key) => {
      if (productDto.hasOwnProperty(key)) {
        obj[key] = productDto[key] ?? submitListing[key]
      }
      return obj
    }, {})
  })
  submitListing.description = productDto.bulletPoints[0]
}

const selectProductId = computed(() => {
  return props.productId
})

const templateList = reactive<any[]>([])
const reqListingTemplateNotPage = () => {
  listingTemplateNotPage().then((res: any) => {
    res.data.forEach((ite: any) => {
      templateList.push({
        value: ite.id,
        label: ite.name
      })
    })
  })
}

const reqValidationPreview = () => {
  submitListingFormRef.value?.validate((valid) => {
    if (valid) {
      if (!selectProductId.value) {
        ElMessage.error('商品数据丢失')
        return
      }
      state.previewBtnLoading = true
      issues.value = []
      preSubmitListing({
        productId: selectProductId.value,
        listingTemplateId: submitListing.templateId,
        validationPreview: true,
        ...submitListing
      })
        .then((res: any) => {
          issues.value = res.data.issues
          onClose()
          ElMessage.success('操作成功')
        })
        .catch(() => {
          onClose()
        })
    }
  })
}

const reqPreSubmitListing = () => {
  submitListingFormRef.value?.validate((valid) => {
    if (valid) {
      if (!selectProductId.value) {
        ElMessage.error('商品数据丢失')
        return
      }
      state.btnLoading = true
      saveSubmitListing({
        productId: selectProductId.value,
        listingTemplateId: submitListing.templateId,
        ...submitListing
      })
        .then((res: any) => {
          globalSubmitListingEvent.value = res.timestamp + ''
          onClose(true)
          ElMessage.success('操作成功')
        })
        .catch(() => {
          onClose()
        })
    }
  })
}

const onClose = (restForm = false) => {
  state.btnLoading = false
  state.previewBtnLoading = false
  if (restForm) {
    state.dialogVisible = false
    submitListingFormRef.value?.resetFields()
  }
}

const onOpen = () => {
  state.dialogVisible = true
  syncProductDtoToSubmitListing()
}

onMounted(() => {
  reqListingTemplateNotPage()
})
</script>
<style scoped lang="scss">
.type-title {
  margin: 15px 0 10px;
  padding-left: 5px;
  font-size: 16px;
  font-weight: 600;
  color: #1f2329;
  border-left: 3px solid #409eff;
}

:deep(.el-form-item) {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

:deep(.el-input),
:deep(.el-select),
:deep(.el-switch) {
  width: 100%;
}

:deep(.el-textarea) {
  width: 100%;
  min-height: 100px;
}
</style>
